<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页 - VideoOrderSystem</title>
    <!-- js 文件 开始 -->
    <div th:replace="fragment/header::css"></div>
    <div th:replace="fragment/header::js"></div>
    <style>
        .carousel-block-opacity{
            color: #000000;
            background-color: rgba(255,255,255,0.7);
        }
        .hover-show-message div{
            display: none;
            background-color: rgba(0,0,0,0);
        }
        .hover-show-message:hover div{
            display: block;
            background-color: rgba(0,0,0,0.7);

        }
    </style>
    <div th:replace="fragment/script::contextPath"></div>
</head>
<body>
    <div th:replace="fragment/nav::nav"></div>
    <div class="container-xl" style="max-width: 1244px">
        <div class="row">
            <div class="col-md-5">
                <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img th:src="@{/image/cover/71543ed91a156e7554c51df8647191d18986b1dd.png}" class="d-block w-100" alt="快来看什么叫双向奔赴！" width="440" height="220">
                            <div class="carousel-caption d-none d-md-block carousel-block-opacity">
                                <h5>快来看什么叫双向奔赴！</h5>
                                <p>擅长捉弄的高木同学 第三季</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{/image/cover/06afffb436d47a391015c2a66ec76855a470a62f.jpg}" class="d-block w-100" alt="试试你能听懂吗？【老奇好好奇终于更新了】" width="440" height="220">
                            <div class="carousel-caption d-none d-md-block carousel-block-opacity">
                                <h5>试试你能听懂吗？【老奇好好奇终于更新了】</h5>
                                <p>六获诺奖的核磁共振超硬核科普</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img th:src="@{/image/cover/4bbd366a96469cd04e626f2832c23a29cf49e5ac.png}" class="d-block w-100" alt="“真凶”浮现！其为女王陛下的祸名" width="440" height="220">
                            <div class="carousel-caption d-none d-md-block carousel-block-opacity">
                                <h5>“真凶”浮现！其为女王陛下的祸名</h5>
                                <p>瓦尼塔斯的手记</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev" style="opacity: 0;">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next" style="opacity: 0;">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </button>
                </div>
            </div>
            <div class="col-md-7" style="display: flex;flex-wrap: wrap;max-width: 712px;">
                <div th:each="video,iterStat:${#numbers.sequence(1,8)}">
                    <div class="card bg-dark text-white hover-show-message" style="width: 160px; height:100px;margin: 5px">
                        <img th:src="@{/image/cover/bg.jpg}" class="card-img" alt="奋斗的青春万岁！" width="160" height="100">
                        <div class="card-img-overlay" style="padding-top: 10px">
                            <h5 class="card-title">奋斗的青春万岁！ up主：朝阳冬泳怪鸽</h5>
<!--                            <p class="card-text">师傅们伙伴们:大家好！我不定时直播？得之坦然，失之淡然，顺其自然。让我们无条件高兴起来。简朴的生活和高贵的灵魂才是人生最高境界。加油奥利给！</p>-->
                            <p class="card-text">播放：25万</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="card" style="margin:10px auto" th:each="video,iterStat:${#numbers.sequence(1,5)}">
            <div class="row">
                <div class="col-md-9" style="display: flex;flex-wrap: wrap;max-width: 853px;padding: 0;margin-left: 39px;">
                    <div class="row">
                        <span th:text="|分类${video}|"></span>
                    </div>
                    <div class="row">
                        <div th:each="v:${#numbers.sequence(1,10)}">
                            <div class="card bg-dark text-white hover-show-message" style="width: 160px; height:100px;margin: 5px">
                                <img th:src="@{/image/cover/bg.jpg}" class="card-img" alt="奋斗的青春万岁！" width="160" height="100">
                                <div class="card-img-overlay" style="padding-top: 10px">
                                    <h5 class="card-title">奋斗的青春万岁！ up主：朝阳冬泳怪鸽</h5>
<!--                                    <p class="card-text">师傅们伙伴们:大家好！我不定时直播？得之坦然，失之淡然，顺其自然。让我们无条件高兴起来。简朴的生活和高贵的灵魂才是人生最高境界。加油奥利给！</p>-->
                                    <p class="card-text">播放：25万</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row"><span th:text="|分类${video}排行榜|"></span></div>
                    <div class="row" style="display: flow-root;"><ul class="list-group">
                        <li class="list-group-item" style="padding: 5px;">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="..." alt="...">
                                </div>
                                <div class="col-md-8">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item" th:each="video,iterStat:${#numbers.sequence(1,4)}">A list item</li>
                    </ul></div>
                </div>
            </div>
        </div>
        <div th:replace="fragment/footer::breadcrumb"></div>
    </div>

    <div th:replace="fragment/model::model_login"></div>
    <div th:replace="fragment/model::model_register"></div>
    <div th:replace="fragment/model::script_login"></div>
    <div th:replace="fragment/model::script_register"></div>
    <div th:replace="fragment/model::script_register_login"></div>
</body>
</html>